<template>
  <view class="customer_service">
    <view class="customer_service_hd">
      结果查询
      <!--  <text v-bind:class="{'current':current}" @click="submitBox">问题提交</text><text v-bind:class="{'current':!current}"
        @click="selectEnd">结果查询</text> -->
    </view>


    <!-- 结果查询 -->
    <view class="customer_service_bd">
      <view class="customer_service_bd_list" v-if="ltsInfo.length>0">
        <view class="customer_service_bd_list_item" v-for="(item,index) in ltsInfo" v-bind:key="index">
          <view class="customer_service_bd_list_item_hd">
            <text>事件ID</text><text>{{item.QuestionNumber}}</text> <text>{{item.CreateDate_str}}</text>
            <text v-bind:class="{'redcurrent':item.StateName == '已处理'}">{{item.StateName}}</text>
          </view>
          <view class="customer_service_bd_list_item_title">
            <text style="width:20%;">问题标题</text>
            <text style="color:#333333;width:80%">{{item.QuestionTitle}}</text>
          </view>
          <view class="customer_service_bd_list_item_desc">
            <text style="width:20%;">问题描述</text>
            <text style="color:#333333;width:80%">{{item.Questionrefer}}</text>
          </view>
          <view class="customer_service_bd_list_item_order">
            <text style="font-weight: bold;color: #333333;font-size: 24rpx;">订单号</text>
            <text style="margin:0 20rpx;">{{item.OrderId}}</text>
          </view>
          <view class="reslut-btn-row">
           <text class="reslut-btn" @click="gotoResult(item.OrderId)" v-if="item.StateName == '已处理'">处理结果</text>
          </view>
        </view>
      </view>

      <view class="customer_service_bd_list" v-if="ltsInfo.length == 0" style="font-size:26rpx;text-align: center;">
        暂未提交任何问题……
      </view>
    </view>
    <!-- 结果查询 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageValue: [],
        valueTxt: '',
        imgLts: [],
        orderId: '',
        imglenth: 0,
        phone: '',
        username: '',
        uid: 0,
        current: true,
        ltsInfo: []
      };
    },
    onLoad() {
      this.selectEnd();
    },
    methods: {
      // 获取上传状态
      select(e) {
        console.log('选择文件：', e)
        this.imgLts.push(e.tempFilePaths[0]);
        this.imglenth = this.imgLts.length;
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
      gotoResult(orderid) {
        uni.navigateTo({
          url: '/subpkg/result_view/result_view?orderId='+orderid
        })
      },
      getYMD() {
        let myDate = new Date()
        let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        let myToday = myDate.getDate(); //获取当前日(1-31)
        myMonth = myMonth > 9 ? myMonth : '0' + myMonth
        myToday = myToday > 9 ? myToday : '0' + myToday
        let nowDate = myYear + '-' + myMonth + '-' + myToday
        return nowDate
      },
      getBeforeDate(n) {
        // = '2018-07-07'.split('-');//这边给定一个特定时间
        var datt = this.getYMD();
        datt = datt.split('-');
        var newDate = new Date(datt[0], datt[1] - 1, datt[2]);
        var befminuts = newDate.getTime() - 1000 * 60 * 60 * 24 * parseInt(n); //计算前几天用减，计算后几天用加，最后一个就是多少天的数量 n为向前或者向后天数
        var beforeDat = new Date;
        beforeDat.setTime(befminuts);
        var befMonth = beforeDat.getMonth() + 1;
        var mon = befMonth >= 10 ? befMonth : '0' + befMonth;
        var befDate = beforeDat.getDate();
        var da = befDate >= 10 ? befDate : '0' + befDate;
        var newDate = beforeDat.getFullYear() + '-' + mon + '-' + da;
        return newDate
      },
      jsonTime(jsondate) {
        var date = new Date(parseInt(jsondate, 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute;
      },
      //查询结果
      selectEnd() {
        this.current = false;
        if (uni.getStorageSync('userinfo')) {
          this.username = JSON.parse(uni.getStorageSync('userinfo')).userName;
        }
        const dataString = {
          startTime: this.getBeforeDate(90),
          endTime: this.getBeforeDate(-1),
          userGameName: this.username
        };
        console.log(JSON.stringify(dataString))
        uni.request({
          url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfAppletQuery`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log(res)
            if (res.data.code == 0) {
              res.data.data.forEach(item => {
                item.CreateDate_str = this.jsonTime(item.CreateDate * 1000)
              })
              this.ltsInfo = res.data.data;
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .customer_service {
    .customer_service_hd {
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      justify-content: center;
      margin-bottom: 30rpx;

      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 0 50rpx;
        position: relative;

        &.current::after {
          content: '';
          width: 98rpx;
          height: 4rpx;
          background: #FFA000;
          border-radius: 2rpx;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 20rpx;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFA000;
        }
      }
    }

    .customer_service_bd {
      width: 710rpx;
      margin: 0 auto;

      .txt-desc1 {
        width: 690rpx;
        margin: 0 auto;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 30rpx;

        .oid {
          margin-left: 20rpx;
        }
      }

      .txt-desc2 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc2-hd {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;
        }

        textarea {
          width: 650rpx;
          height: 220rpx;
          background: #F5F5F5;
          font-size: 24rpx;
          font-family: PingFang SC;
          border: 1px solid #ccc;
          padding: 10rpx;
        }
      }

      .txt-desc3 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc3-title {
          width: 100%;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;
        }

        image {
          width: 172rpx;
          height: 172rpx;
        }
      }

      .txt-tips {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 60rpx;

        .txt-tips-red {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #F05552;
          text-align: left;
          margin-bottom: 10rpx;
        }

        .txt-tips-contxt {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-bottom: 10rpx;
        }
      }

      .txt-desc4 {
        width: 690rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;

        .txt-desc4-title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .uni-input {
          color: #333333;
        }

        input {
          width: 670rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #F5F5F5;
          border-radius: 12rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #F5F5F5;
          padding-left: 20rpx;
        }
      }

      .submit-btn {
        width: 690rpx;
        margin: 0 auto;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: #FFA000;
        border-radius: 6rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }

      .customer_service_bd_list {
        width: 710rpx;
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;

        .customer_service_bd_list_item {
          width: 710rpx;
          min-height: 324rpx;
          margin: 0 auto;
          background: #FFFFFF;
          border-radius: 12rpx;
          margin-bottom: 60rpx;
          border-bottom: 2rpx dashed #ccc;
          .reslut-btn-row{
            width:100%;
            display: flex;
            justify-content: flex-end;
            margin-top:20rpx;
            .reslut-btn {
              width: 157rpx;
              height:68rpx;
              line-height: 68rpx;
              text-align: center;
              background: #FFFFFF;
              border: 2rpx solid #FFA000;
              border-radius: 34rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #FFA000;
              margin-right: 20rpx;
              margin-bottom:20rpx;
              float:right;
            }
          }
          .customer_service_bd_list_item_hd {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            margin-bottom: 30rpx;

            .redcurrent {
              color: red;
            }
          }

          .customer_service_bd_list_item_title {
            width: 710rpx;
            margin: 0 auto;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 30rpx;

            text {
              text-align: lef;
            }
          }

          .customer_service_bd_list_item_desc {
            width: 710rpx;
            margin: 0 auto;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 40rpx;

            text {
              text-align: lef;
            }
          }

          .customer_service_bd_list_item_order {
            width: 662rpx;
            margin: 0 auto;
            height: 68rpx;
            line-height: 68rpx;
            background: #F5F5F5;
            display: flex;
            justify-content: flex-start;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
</style>